<template>
	<div class="shelf-edit table-theme">
		<head-back-title title="货架详情"></head-back-title>
		<el-card>
			<div class="shelf-info" v-if="showView">
				<p class="title">货架信息</p>
				<el-form label-width="120px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="名称:">
								<el-input :disabled="true" v-model="info.name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="类型:">
								<el-select v-model="info.type" placeholder="空" :disabled="true">
									<el-option v-for="item in typeOptions" :key="item.type_id" :label="item.type_name" :value="Number(item.type_id)"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="info.is_meal==4">
							<el-form-item label="小程序Appid:">
								<el-input :disabled="true" v-model="info.app_id"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="info.is_meal==4">
							<el-form-item label="小程序链接:">
								<el-input :disabled="true" v-model="info.app_link"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="排序:">
								<el-input :disabled="true" v-model="info.sort"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="空间编号:">
								<el-select v-model="info.space_id" placeholder="空" :disabled="true">
									<el-option v-for="item in spaceOptions" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="备注:">
								<el-input :disabled="true" v-model="info.brief" type="textarea" :rows="3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="图片:">
								<ImgPopover class="shelf-main-bg" :src="info.image"></ImgPopover>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="状态:">
						<el-switch :disabled="true" v-model="info.is_show" :active-value="1" :inactive-value="2"></el-switch>
					</el-form-item>
				</el-form>
			</div>
			<p class="title">货架商品</p>
			<div class="top-menu">
				<div class="menu-left">
					<div class="type-view">
						<div class="client-item" v-for="(item, index) in classifyList" @click="roleType(item.type)" :key="index" :class="[goods_type == item.type ? 'client-item-active' : '']">
							{{ item.name }}
						</div>
					</div>

					<div class="orderby-view">
						<el-select size="small" v-model="order_by" placeholder="请选择" @change="refreshPage()">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>
				<div class="menu-right">
					<refresh-button style="margin-top: -5px;" @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<div class="top-add-btn">
				<div class="add" v-for="item in addList" :key="item.id">
					<el-button type="primary" size="mini" @click="addGoods(item.id)">{{item.text}}</el-button>
				</div>
			</div>
			<el-table :data="goodsList">
				<el-table-column label="货架序号" align="center" prop="shelf_goods_id"></el-table-column>
				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="店铺名" align="center" prop="store_name"></el-table-column>
				<el-table-column label="类型" align="center" prop="goods_type_name"></el-table-column>
				<el-table-column label="是否置顶" align="center" prop="">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.up_index == 1">是</el-tag>
						<el-tag v-else>否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.goods_image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" prop="">
					<template slot-scope="scope">
						<p v-if="scope.row.is_sale == 1">上架</p>
						<p v-else>下架</p>
					</template>
				</el-table-column>
				<el-table-column label="置顶排序" align="center">
					<template slot-scope="scope">
						<el-input v-if="scope.row.up_index == 1" v-model="scope.row.up_sort" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="postTopSort(scope.row.up_sort, scope.row.shelf_goods_id)" @blur="postTopSort(scope.row.up_sort, scope.row.shelf_goods_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" placeholder="" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="postSort(scope.row.sort, scope.row.shelf_goods_id)" @blur="postSort(scope.row.sort, scope.row.shelf_goods_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="210">
					<template slot-scope="scope">
						<el-button v-if="scope.row.up_index == 0" type="primary" size="mini" @click="topping(scope.row,1)">置顶</el-button>
						<el-button v-if="scope.row.up_index == 1" type="primary" size="mini" @click="topping(scope.row,0)">取消置顶</el-button>
						<el-button type="primary" size="mini" @click="edit(scope.row.shelf_goods_id, scope.row.goods_type, scope.row.sort)">编辑</el-button>
						<el-button type="danger" size="mini" @click="delGoods(scope.row.shelf_goods_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import addShelvesGoods from '@/components/layer-dialog/add-shelves-goods/add-shelves-goods.vue';
	import addShelvesStoreGoods from '@/components/layer-dialog/add-shelves-goods/add-shelves-store-goods.vue';
	import addShelvesPackage from '@/components/layer-dialog/add-shelves-goods/add-shelves-package.vue';
	import addShelvesVr from '@/components/layer-dialog/add-shelves-goods/add-shelves-vr.vue';
	import addShelvesFactory from '@/components/layer-dialog/add-shelves-goods/add-shelves-factory.vue';
	import addShelvesCase from '@/components/layer-dialog/add-shelves-goods/add-shelves-case.vue';
	import addShelvesBanner from '@/components/layer-dialog/add-shelves-goods/add-shelves-banner.vue';
	import addShelvesClass from '@/components/layer-dialog/add-shelves-goods/add-shelves-class.vue';
	import addShelvesCoupon from '@/components/layer-dialog/add-shelves-goods/add-shelves-coupon.vue';
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover,
			addShelvesGoods,
			addShelvesStoreGoods,
			addShelvesPackage,
			addShelvesVr,
			addShelvesFactory,
			addShelvesCase,
			addShelvesBanner,
			addShelvesClass,
			addShelvesCoupon
		},
		data() {
			return {
				options: [{
						value: 'shelf_goods_id',
						label: '货架排序'
					},
					{
						value: 'sort',
						label: '排序'
					}
				],
				order_by: 'shelf_goods_id',
				showView: false,
				spaceOptions: [],
				typeOptions: [],
				info: '',
				page: 0,
				total: 0,
				totalData: 0, // 数据总数
				goodsList: [],
				goods_type: 0,
				shelf_id: '',
				classifyList: [{
						type: 0,
						name: '所有'
					},
					{
						type: 1,
						name: '平台商品'
					},
					{
						type: 11,
						name: '特价套餐'
					},
					{
						type: 2,
						name: '全屋套餐'
					},
					{
						type: 3,
						name: 'N98套餐'
					},
					{
						type: 4,
						name: '商家商品'
					},
					{
						type: 5,
						name: 'VR'
					},
					{
						type: 6,
						name: '品牌街'
					},
					{
						type: 7,
						name: '案例'
					},
					{
						type:8,
						name:"轮播图(定制)"
					},
					{
						type:9,
						name:"分类(定制)"
					},
					{
						type:10,
						name:"优惠卷"
					}
				],
				addList:[
					{
						id:1,
						text:'关联平台商品'
					},
					{
						id: 11,
						text: '关联特价套餐'
					},
					{
						id:2,
						text:"关联全屋套餐"
					},
					{
						id:3,
						text:"关联N98套餐"
					},
					{
						id:4,
						text:"关联商家商品"
					},
					{
						id:5,
						text:"关联VR"
					},
					{
						id:6,
						text:"关联品牌"
					},
					{
						id:7,
						text:"关联案例"
					},
					{
						id:9,
						text:"关联分类"
					},
					{
						id:8,
						text:"关联轮播图"
					},
					{
						id:10,
						text:"关联优惠卷"
					}
				]
			};
		},
		methods: {
			init(e) {
				this.shelf_id = this.$route.query.id;
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					shelf_id: this.shelf_id,
					goods_type: this.goods_type,
					order_by: this.order_by,
					asc: 2
				};
				if (this.goods_type == 0) {
					delete data.goods_type;
				}
				this.$http(this.$ApiList.ShelfGoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						let type_name = ['', '平台商品', '全屋套餐', 'N98套餐', '商家商品', 'VR', '品牌街','','','','优惠卷','特价套餐'];
						item.goods_type_name = type_name[item.goods_type];
						if(item.is_sale !== 2){
							this.goodsList.push(item);
						}
					});
					this.total = res.datas.count;
				});
			},
			edit(id, goods_type, sort) {
				this.$prompt('请输入新的ID', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					})
					.then(({
						value
					}) => {
						let data = {
							shelf_goods_id: id,
							goods_id: value,
							goods_type: goods_type,
							sort: sort
						};
						this.$http(this.$ApiList.ShelfGoodsEdit, data).then(res => {
							this.$layer.msg(res.datas);
							this.init(this.page);
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
			},

			addGoods(type) {
				if (type == 1) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['65%', '60%'],
						content: {
							content: addShelvesGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				}else if(type==11){
					this.$layer.iframe({
						title: '选择套餐',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id),
								is_house: 3
							} //props
						}
					});
				} else if (type == 2) {
					this.$layer.iframe({
						title: '选择套餐',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id),
								is_house: 2
							} //props
						}
					});
				} else if (type == 3) {
					this.$layer.iframe({
						title: '选择套餐',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id),
								is_house: 1
							} //props
						}
					});
				} else if (type == 4) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesStoreGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				} else if (type == 5) {
					this.$layer.iframe({
						title: '选择VR',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesVr, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				} else if (type == 6) {
					this.$layer.iframe({
						title: '选择工厂',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesFactory, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				} else if (type == 7) {
					this.$layer.iframe({
						title: '选择案例',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesCase, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				}else if(type == 9){
					this.$layer.iframe({
						title:'选择分类',
						maxmin:true,
						area:['45%','60%'],
						content:{
							content:addShelvesClass,
							parent:this,
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} 
						}
					})
				}else if(type == 8){
					this.$layer.iframe({
						title:'选择轮播图',
						maxmin:true,
						area:['45%','60%'],
						content:{
							content:addShelvesBanner,
							parent:this,
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} 
						}
					})
				}else if(type == 10){
					this.$layer.iframe({
						title: '选择优惠卷',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesCoupon, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.shelf_id)
							} //props
						}
					});
				}
			},
			delGoods(id) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							shelf_goods_id: id
						};
						this.$http(this.$ApiList.ShelfGoodsDel, data).then(res => {
							this.$message({
								type: 'success',
								message: res.datas
							});
							this.init(this.page);
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			roleType(type) {
				this.goods_type = type;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.goods_type = 0;
				this.init();
			},
			postTopSort(up_sort, shelf_goods_id) {
				if (up_sort < 0 || up_sort === '') {
					this.$layer.msg('请输入正确的排序');
					return;
				}
				let data = {
					up_sort: up_sort,
					shelf_goods_id: shelf_goods_id
				};
				this.$http(this.$ApiList.ShelfGoodsUpSort, data).then(res => {});
			},
			postSort(sort, shelf_goods_id) {
				if (sort < 0 || sort === '') {
					this.$layer.msg('请输入正确的排序');
					return;
				}
				let data = {
					sort: sort,
					shelf_goods_id: shelf_goods_id
				};
				this.$http(this.$ApiList.ShelfGoodsUp, data).then(res => {});
			},
			getInfo() {
				this.$http(this.$ApiList.ShelfInfo, {
					shelf_id: this.shelf_id
				}).then(res => {
					this.info = res.datas.info;
					this.typeOptions = res.datas.shelf_type;
					this.showView = true;
				});
				this.$http(this.$ApiList.ClassSpaceList, {
					limit: 100
				}).then(res => {
					this.spaceOptions = res.datas.data;
				});
			},
			topping(item, up_index) {
				let data = {
					shelf_goods_id: item.shelf_goods_id,
					up_index: up_index
				}
				this.$http(this.$ApiList.ShelfUpIndex, data).then(res => {
					item.up_index = up_index
				});
			}
		},
		created() {
			this.init();
			this.getInfo();
		}
	};
</script>
<style lang="scss">
	.shelf-edit {
		.shelf-main-bg img {
			width: 80px !important;
			height: 80px !important;
		}

		.top-menu {
			margin-bottom: 20px;
		}
		.top-add-btn{
			display: flex;
			height: 40px;
			.add{
				margin-right: 10px;
			}
		}

		.type-view {
			display: flex;
		}

		.type-view .client-item {
			margin-right: 30px;
			line-height: 30px;
			color: rgba(153, 153, 153, 1);
			cursor: pointer;
		}

		.client-item-active {
			color: #333333 !important;
			border-bottom: 4px solid #34a1e0;
		}

		.orderby-view {
			width: 110px;
		}
	}
</style>
